<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>管理后台</title>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <link href="/favicon.ico" type="image/x-icon" rel="shortcut icon" />
    <!-- Bootstrap 3.3.4 -->
    <link href="/public/admin/css/bootstrap.min.css?v=3.3.5" rel="stylesheet">
    <link href="/public/admin/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">
    <link href="/public/admin/css/animate.css" rel="stylesheet">
    <link href="/public/admin/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
    <link href="/public/admin/css/style.css?v=4.0.0" rel="stylesheet">
    <link href="/public/admin/css/ratuo.css" rel="stylesheet">

    <script src="/public/admin/js/jquery.min.js?v=2.1.4"></script>
    <script src="/public/admin/js/bootstrap.min.js?v=3.3.5"></script>
    <script src="/public/admin/js/common.js"></script>
    <script src="/public/admin/js/plugins/layer/layer.min.js"></script>
    <script src="/public/admin/js/myAjax.js"></script>
    <script src="/public/admin/js/jquery.validate.js"></script>

    <link href="/public/admin/css/plugins/iCheck/custom.css" rel="stylesheet">
    <script src="/public/admin/js/plugins/iCheck/icheck.min.js"></script>

    <script src="/public/admin/js/article.js"></script>
    <script src="/public/admin/js/echart.min.js"></script>
    <style>
        .main{
            width: 100%;height:500px;display:inline-block;
        }
    </style>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>图表</h5>
                </div>

                <div class="ibox-content">
                    <div class="col-sm-2" style="float:right;">
                        <span class="input-group-btn"> <button type="button" class="btn btn-primary" id="start">开始</button> </span>
                        <span class="input-group-btn"> <button type="button" class="btn btn-primary" id="stop">暂停</button> </span>
                    </div>

                    <div class="col-sm-2" style="float:right;">
                        <div class="input-group">
                            <input type="text" class="form-control" name="limit" value="100"> <span class="input-group-btn"> <button type="button" class="btn btn-primary" onclick="getLimit()">确定</button> </span>
                        </div>
                    </div>
                    <div class="col-sm-2" style="float:right;">
                        <span class="input-group-btn"> <button type="button" class="btn btn-primary" onclick="getTime();">开始计时</button></span>
                        <span class="input-group-btn"> <button type="button" class="btn btn-primary" id="time">00:00:00:000</button></span>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="box">
                                <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
                                <div id="main1" class="main"></div>
                                <div id="main2" class="main"></div>
                                <div id="main3" class="main"></div>

                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<input id="handle_status" value="" hidden="hidden">
<input id="kind_id" value="0" hidden="hidden">

</body>
<script type="text/javascript">
    var starttime = 0;
    function getTime(){
        var date = new Date();
        starttime = date.getTime();
    }
    var myChart1 = echarts.init(document.getElementById('main1'));
    var time;
    var limit = 100;
    getData('C',limit,myChart1);
    function getData(type,limit,chat){
        $.ajax({
            url : "{:url('Chart/chart_gls')}",
            type : "post",
            data : {type:type,limit:limit,starttime:starttime},
            dataType : "json",
            success:function(res){
                // 基于准备好的dom，初始化echarts实例
                // 指定图表的配置项和数据
                var text ='';
                var Ya={};
                $('#time').text(res.time);
                if (type == 'C'){
                    text = '距离(mm)';
                    Ya={
                        min:0,
                        max:60000
                    }
                }

                var option1 = {
                    title: {
                        text: text
                    },
                    tooltip: {},
                    legend: {
                        data:[text]
                    },
                    xAxis: {
                        data: res.createtime
                    },
                    yAxis:Ya,
                    series: [{
                        name: text,
                        type: 'line',
                        data: res.arr
                    },]
                };
                // 使用刚指定的配置项和数据显示图表。
                chat.setOption(option1);

            }
        });

    }
    function  getLimit() {
        limit = $('input[name="limit"]').val();
        top.layer.msg('正在获取...',{time:1000},function(){
        });
    }
    function autoPlay(){
        time = setInterval(function(){
            getData('C',limit,myChart1);
        },1000);
    }
    autoPlay();　　//调用函数

    $("#start").click(function(){
        autoPlay();
        top.layer.msg('已开始',{time:1000},function(){
        });
    });

    $("#stop").click(function(){
        clearInterval(time),function(){
            autoPlay();
        }
        top.layer.msg('已暂停',{time:1000},function(){
        });
    })

</script>

</html>
